Using text-shadow in CSS
text-shadow adds a shadow effect to text, giving depth or emphasis. You can control the horizontal and vertical offsets, blur radius, and shadow color.
text-shadow: h-offset v-offset blur-radius color;– Basic syntax where:h-offset: horizontal displacement of the shadow (positive = right, negative = left).
v-offset: vertical displacement (positive = down, negative = up).
blur-radius: optional, makes the shadow softer (default 0).
color: color of the shadow.
In this example, the text shadow is offset 2px to the right and 2px down, with a blur of 5px in gray. This creates a subtle shadow effect behind the text.
You can apply multiple shadows by separating them with commas. Each shadow can have different offsets, blur, and color for creative effects.
text-shadowenhances text appearance and improves readability against backgrounds.Use subtle shadows for a professional look; avoid excessive shadows that reduce readability.
Multiple shadows can be layered for 3D or glowing effects.
Works with headings, buttons, and decorative text for UI enhancement.